<template>
	<view class="content">
		<!-- 轮播图-S -->
		<swiper :indicator-dots="true" :autoplay="true" class="carousel">
			<swiper-item v-for="item in swiperList" :key="item.id">
				<image :src="item.image" mode="heightFix" class="swiper_img"></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图-E -->

		<!-- 热门电影-S -->
		<view class="view_bgc hot_view">
			<view class="hot_title">
				<image src="../../static/icons/hot.png" class="hot_cion"></image>
				<view class="hot_titles">
					热门电影
				</view>
			</view>
		</view>

		<scroll-view scroll-x="true" class="view_bgc hot_scroll">
			<view class="video_content" v-for="item in hotList" :key="item.id">
				<view class="video_box">
					<image :src="item.imgSrc" class="video_img">
					</image>
					<view class="video_title">
						{{item.name}}
					</view>
					<score :scoreNum="item.num" :isShow="item.show"></score>
				</view>
			</view>
		</scroll-view>
		<!-- 热门电影-E -->

		<!-- 热门预告-S -->
		<view class="hot_view view_bgc">
			<view class="hot_title">
				<image src="../../static/icons/interest.png" class="hot_cion"></image>
				<view class="hot_titles">
					热门预告
				</view>
			</view>
		</view>
		<view class="hot_video view_bgc">
			<video
				src="http://mdup.apdcdn.tc.qq.com/vcloud1022.tc.qq.com/1022_d35f9f934fa64fb7b1c2f225337cf55c.f0.mp4?vkey=EF84BEC7B073D830522ADCDC3936E4F97318D878FD5B75D24D2B83D465724F1E8FD7465E3D1053139E75BFCA0112DFB33FE3AA851730FAEA841047CDEEDBA726E6FEF84FC3AF0005F46ED2A5BCB107A5D3D8AFD06458E4CC&sha=0"
				controls class="videoBox"></video>
			<video
				src="http://mdup.apdcdn.tc.qq.com/vcloud1022.tc.qq.com/1022_d35f9f934fa64fb7b1c2f225337cf55c.f0.mp4?vkey=EF84BEC7B073D830522ADCDC3936E4F97318D878FD5B75D24D2B83D465724F1E8FD7465E3D1053139E75BFCA0112DFB33FE3AA851730FAEA841047CDEEDBA726E6FEF84FC3AF0005F46ED2A5BCB107A5D3D8AFD06458E4CC&sha=0"
				controls class="videoBox"></video>
			<video
				src="http://mdup.apdcdn.tc.qq.com/vcloud1022.tc.qq.com/1022_d35f9f934fa64fb7b1c2f225337cf55c.f0.mp4?vkey=EF84BEC7B073D830522ADCDC3936E4F97318D878FD5B75D24D2B83D465724F1E8FD7465E3D1053139E75BFCA0112DFB33FE3AA851730FAEA841047CDEEDBA726E6FEF84FC3AF0005F46ED2A5BCB107A5D3D8AFD06458E4CC&sha=0"
				controls class="videoBox"></video>
			<video
				src="http://mdup.apdcdn.tc.qq.com/vcloud1022.tc.qq.com/1022_d35f9f934fa64fb7b1c2f225337cf55c.f0.mp4?vkey=EF84BEC7B073D830522ADCDC3936E4F97318D878FD5B75D24D2B83D465724F1E8FD7465E3D1053139E75BFCA0112DFB33FE3AA851730FAEA841047CDEEDBA726E6FEF84FC3AF0005F46ED2A5BCB107A5D3D8AFD06458E4CC&sha=0"
				controls class="videoBox"></video>
		</view>
		<!-- 热门预告-E -->

		<!-- 猜你喜欢-S -->
		<view class="hot_view view_bgc">
			<view class="hot_title">
				<image src="../../static/icons/guess-u-like.png" class="hot_cion"></image>
				<view class="hot_titles">
					猜你喜欢
				</view>
			</view>
		</view>

		<view class="film_box view_bgc">
			<view class="film_content">
				<image class="film_img"
					src="https://images.weserv.nl/?url=img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.jpg">
				</image>

				<view class="brief_introduction">
					<view class="film_title">
						霸王别姬
					</view>
					<score :scoreNum="10" :isShow="0"></score>

					<view class="film_info">
						1993 / 中国香港 / 文艺 爱情
					</view>
					<view class="film_info">
						张国荣 张丰毅 巩俐 吕奇 英达 葛优
						<!-- 克里斯品•格拉夫 弗雷德•塔塔绍尔 -->
					</view>
				</view>

				<view class="film_operation">
					<image src="../../static/icons/praise.png" class="praise_cion"></image>
					<view class="praise_me">
						点赞
					</view>
				</view>
			</view>

			<view class="film_content">
				<image class="film_img"
					src="https://images.weserv.nl/?url=img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.jpg">
				</image>

				<view class="brief_introduction">
					<view class="film_title">
						霸王别姬
					</view>
					<score :scoreNum="10" :isShow="0"></score>

					<view class="film_info">
						1993 / 中国香港 / 文艺 爱情
					</view>
					<view class="film_info">
						张国荣 张丰毅 巩俐 吕奇 英达 葛优
						<!-- 克里斯品•格拉夫 弗雷德•塔塔绍尔 -->
					</view>
				</view>

				<view class="film_operation">
					<image src="../../static/icons/praise.png" class="praise_cion"></image>
					<view class="praise_me">
						点赞
					</view>
				</view>
			</view>


			<view class="film_content">
				<image class="film_img"
					src="https://images.weserv.nl/?url=img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.jpg">
				</image>

				<view class="brief_introduction">
					<view class="film_title">
						霸王别姬
					</view>
					<score :scoreNum="10" :isShow="0"></score>

					<view class="film_info">
						1993 / 中国香港 / 文艺 爱情
					</view>
					<view class="film_info">
						张国荣 张丰毅 巩俐 吕奇 英达 葛优
						<!-- 克里斯品•格拉夫 弗雷德•塔塔绍尔 -->
					</view>
				</view>

				<view class="film_operation">
					<image src="../../static/icons/praise.png" class="praise_cion"></image>
					<view class="praise_me">
						点赞
					</view>
				</view>
			</view>

			<view class="film_content">
				<image class="film_img"
					src="https://images.weserv.nl/?url=img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.jpg">
				</image>

				<view class="brief_introduction">
					<view class="film_title">
						霸王别姬
					</view>
					<score :scoreNum="10" :isShow="0"></score>

					<view class="film_info">
						1993 / 中国香港 / 文艺 爱情
					</view>
					<view class="film_info">
						张国荣 张丰毅 巩俐 吕奇 英达 葛优
						<!-- 克里斯品•格拉夫 弗雷德•塔塔绍尔 -->
					</view>
				</view>

				<view class="film_operation">
					<image src="../../static/icons/praise.png" class="praise_cion"></image>
					<view class="praise_me">
						点赞
					</view>
				</view>
			</view>

			<view class="film_content">
				<image class="film_img"
					src="https://images.weserv.nl/?url=img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.jpg">
				</image>

				<view class="brief_introduction">
					<view class="film_title">
						霸王别姬
					</view>
					<score :scoreNum="10" :isShow="0"></score>

					<view class="film_info">
						1993 / 中国香港 / 文艺 爱情
					</view>
					<view class="film_info">
						张国荣 张丰毅 巩俐 吕奇 英达 葛优
						<!-- 克里斯品•格拉夫 弗雷德•塔塔绍尔 -->
					</view>
				</view>

				<view class="film_operation">
					<image src="../../static/icons/praise.png" class="praise_cion"></image>
					<view class="praise_me">
						点赞
					</view>
				</view>
			</view>

			<view class="film_content">
				<image class="film_img"
					src="https://images.weserv.nl/?url=img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.jpg">
				</image>

				<view class="brief_introduction">
					<view class="film_title">
						霸王别姬
					</view>
					<score :scoreNum="10" :isShow="0"></score>

					<view class="film_info">
						1993 / 中国香港 / 文艺 爱情
					</view>
					<view class="film_info">
						张国荣 张丰毅 巩俐 吕奇 英达 葛优
						<!-- 克里斯品•格拉夫 弗雷德•塔塔绍尔 -->
					</view>
				</view>

				<view class="film_operation">
					<image src="../../static/icons/praise.png" class="praise_cion"></image>
					<view class="praise_me">
						点赞
					</view>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢-E -->
	</view>


</template>

<script>
	//导入自定义组件
	import score from "../../components/score.vue";
	export default {
		data() {
			return {
				swiperList: [{
						"id": 2,
						"movieID": "",
						"image": "https://images.weserv.nl/?url=//img3.doubanio.com/view/photo/l/public/p2556561071.webp",
						"sort": 1,
						"isShow": 1
					},
					{
						"id": 3,
						"movieID": "",
						"image": "https://images.weserv.nl/?url=img1.doubanio.com/view/photo/l/public/p2559849368.webp",
						"sort": 1,
						"isShow": 1
					},
					{
						"id": 4,
						"movieID": "",
						"image": "https://images.weserv.nl/?url=img3.doubanio.com/view/photo/l/public/p2432517600.webp",
						"sort": 1,
						"isShow": 1
					}
				],
				hotList: [{
					"id": 1,
					"imgSrc": "https://images.weserv.nl/?url=img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.jpg",
					"name": "霸王别姬",
					"num": 9.6,
					"show": 1
				}, {
					"id": 2,
					"imgSrc": "https://images.weserv.nl/?url=img3.doubanio.com/view/photo/s_ratio_poster/public/p511118051.jpg",
					"name": "这个杀手不太冷",
					"num": 9.4,
					"show": 1
				}, {
					"id": 3,
					"imgSrc": "https://images.weserv.nl/?url=img3.doubanio.com/view/photo/s_ratio_poster/public/p524964016.jpg",
					"name": "忠犬八公的故事",
					"num": 9.5,
					"show": 1
				}, {
					"id": 4,
					"imgSrc": "https://images.weserv.nl/?url=img3.doubanio.com/view/photo/s_ratio_poster/public/p510861873.jpg",
					"name": "美丽人生",
					"num": 9.4,
					"show": 1
				}, {
					"id": 5,
					"imgSrc": "https://images.weserv.nl/?url=img3.doubanio.com/view/photo/s_ratio_poster/public/p457760035.jpg",
					"name": "泰坦尼克号",
					"num": 9.4,
					"show": 1
				}, {
					"id": 6,
					"imgSrc": "https://images.weserv.nl/?url=img1.doubanio.com/view/photo/s_ratio_poster/public/p2557573348.jpg",
					"name": "千与千寻",
					"num": 9.3,
					"show": 1
				}, {
					"id": 7,
					"imgSrc": "https://images.weserv.nl/?url=img3.doubanio.com/view/photo/s_ratio_poster/public/p492406163.jpg",
					"name": "辛德勒的名单",
					"num": 9.5,
					"show": 1
				}],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		onLoad() {
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			}
		},
		//挂载组件
		components: {
			score
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
		background-color: #f1f1f1;
		/* position: absolute; */
	}

	.carousel {
		width: 100%;
		height: 440upx;
	}

	.swiper_img {
		width: 100%;
		height: 440upx;
	}

	.hot_view {
		width: 100%;
		margin-top: 16upx;
		height: auto;
		padding: 20upx;
		box-sizing: border-box;
	}

	.hot_title {
		display: flex;
		flex-direction: row;
	}

	.hot_title .hot_cion {
		width: 32upx;
		height: 32upx;
		margin-top: 16upx;
		margin-right: 20upx;
	}

	.hot_titles {
		font-size: 20px;
		font-weight: bold;
	}

	.hot_scroll {
		width: 100%;
		white-space: nowrap;
		padding: 0 20upx 20upx 20upx;
		box-sizing: border-box;
	}

	/* .hot_box{
		width: 100%;
		white-space: normal;
	} */
	.video_content {
		display: inline-block;
		margin-right: 20upx;
	}

	.video_box {
		display: flex;
		flex-direction: column;
	}

	.video_img {
		width: 200upx;
		height: 270upx;
	}

	.video_title {
		width: 200upx;
		margin-top: 10upx;
		font-size: 14px;
		text-align: center;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.video_pf {
		width: 200upx;
		margin-top: 10upx;
		display: flex;
		flex-direction: row;

		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}

	.pf_icon {
		width: 20upx;
		height: 20upx;
		margin-top: 10upx;
	}

	.video_pf_num {
		font-size: 12px;
		margin-left: 8upx;
	}

	.hot_video {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20upx 20upx 20upx;
		box-sizing: border-box;
	}

	.videoBox {
		width: 350upx;
		height: 220upx;
		margin-top: 10upx;
	}

	.film_box {
		display: flex;
		flex-direction: column;
		/* 竖向排列 */
		padding: 0 20upx 20upx 20upx;
		box-sizing: border-box;
	}

	.film_content {
		display: flex;
		flex-direction: row;
		/* 横线排列 */
		justify-content: space-between;
		margin-bottom: 40upx;
	}

	.film_img {
		width: 180rpx;
		height: 240upx;
		border-radius: 0.2upx;
	}

	.brief_introduction {
		width: 340upx;
		display: flex;
		flex-direction: column;
		/* 竖向排列 */
	}

	.film_title {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.film_info {
		font-size: 12px;
		color: #808080;
		margin-top: 5upx;
	}

	.film_operation {
		width: 140upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-left: 2px dashed #ccc;
	}

	.praise_cion {
		width: 40upx;
		height: 40upx;
		align-self: center;
	}

	.praise_me {
		font-size: 14px;
		color: #feab2a;
		align-self: center;
	}
</style>
